
const path = require("node:path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const miniCSSExtractPlugin = require("mini-css-extract-plugin");
const destinationPath = path.resolve(__dirname, "dist");

const indexPage = new htmlWebpackPlugin({
    template: "./src/index.html",
    filename: "index.html",
    inject: "body",
    chunks: ["style", "index"]
});
const registerPage = new htmlWebpackPlugin({
    template: "./src/pages/register.html",
    filename: "pages/register.html",
    inject: "body",
    chunks: ["style", "register"]
});
const loginPage = new htmlWebpackPlugin({
    template: "./src/pages/login.html",
    filename: "pages/login.html",
    inject: "body",
    chunks: ["style", "login"]
});
const createPage = new htmlWebpackPlugin({
    template: "./src/pages/edit.html",
    filename: "pages/edit.html",
    inject: "body",
    chunks: ["style", "edit"]
});
const listPage = new htmlWebpackPlugin({
    template: "./src/pages/list.html",
    filename: "pages/list.html",
    inject: "body",
    chunks: ["style", "list"]
});
const wjPage = new htmlWebpackPlugin({
    template: "./src/pages/wj.html",
    filename: "pages/wj.html",
    inject: "body",
    chunks: ["style", "wj"]
});


module.exports =  {
    devtool: false,
    mode: "development",
    entry: {
        style: "./src/style",
        index: "./src/index.js",
        register: "./src/js/register.js",
        login: "./src/js/login.js",
        edit: "./src/js/edit.js",
        list: "./src/js/list.js",
        wj: "./src/js/wj.js"
    },
    output: {
        path: destinationPath,
        filename: "js/[name].js"
    },
    optimization: {
        splitChunks: {
            // include all types of chunks
            chunks: 'all',
        },
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                use: "html-loader",
            },
            {
                test: /\.css$/i,
                use: [miniCSSExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.(png|svg|jpe?g|webp|gif|ico)$/i,
                type: "asset/resource",
                generator: {
                    filename: "images/[name]-[hash:8][ext]",
                }
            }
        ]
    },
    plugins: [
        new miniCSSExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "css/[id].css"
        }),
        indexPage,
        registerPage,
        loginPage,
        createPage,
        listPage,
        wjPage
    ],

    devServer: {
        client: {
            progress: true,
        },
        watchFiles: ["./src/**/*"],
        hot: true,
    }
};

